<template>
	<!--h5视频播放首页-->
	<view class="container">
		<!--免费播放器-->
<!--		<TopVideo ref="TopVideo"></TopVideo>-->

		<view class="video-container">
			<div id="index-player" class="video"></div>
		</view>

		<!--导航列表-->
		<TopNav ref="TopNav"></TopNav>

		<!--视频列表-->
		<VideoList ref="VideoList" @VideoList="VideoList"></VideoList>

		<!--底部按钮-->
		<Footer></Footer>

		<!--返回顶部-->
		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<!--支付模态框-->
		<Pay ref="PayModal"></Pay>
	</view>
</template>

<script>
	import TopVideo from "@/components/top_video.vue"
	import TopNav from "@/components/top_nav.vue"
	import VideoList from "@/components/video_list.vue"
	import Footer from "@/components/footer.vue"
	import Pay from "@/components/pay.vue"
	import player from "dplayer";
	import Hls from "hls.js";
	import {API_URL, BASE, BASE_VIDEO} from "../../env";

	export default {
		data() {
			return {
				scrollTop: 0,
				title: 'Hello',
				player: {},
			}
		},
		components: {VideoList,TopNav,Footer,TopVideo,Pay},
		onLoad() {
			// console.log('首页加载')
			// this.codeFall()
		},
		onShow() {
			console.log('首页加载')
			this.codeFall()
		},

		// 下拉加载
		onReachBottom() {
			// 触底加载视频
			this.$refs.VideoList.appendVideo();
		},

		// 上拉刷新
		onPullDownRefresh() {
			this.$refs.VideoList.refreshVideo();
			setTimeout(() => {
				wx.stopPullDownRefresh()
			}, 2000)

		},

		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {

			// code落地
			codeFall() {
				let url = window.location.pathname;
				this.$api.ms({}, url).then((res) => {
					this.homeFall({}, '/' + res.path)
				});
			},

			// 首页落地地址
			homeFall(data = {}, url = '') {
				this.$api.getHomeFall(data, url).then((res) => {
					let {code, out_video, pic_type, user_score, score, cookie} = res;
					let storeObj = {
						code: code,
						out_video: out_video,
						pic_type: pic_type,
						user_score: user_score,
						score: score,
						code0: cookie
					};
					// 剩余参数
					// page = 1;
					// var category_id = 0;
					// var buyed = 0;
					// var random_view = 1;
					// var searchkey = '';
					// var recommend = 0;
					// var selltop = 0;
					// console.log('初次获取到的数据', res);
					// console.log('存入缓存的数据', storeObj);

					// 数据存储到本地
					uni.setStorageSync('homeStore', storeObj);

					// 触发视频页面的基础数据获取
					this.$refs.VideoList.getStoreData(storeObj);

					// 触发导航页面的基础数据获取
					this.$refs.TopNav.getStoreData(storeObj);
					this.$refs.TopNav.pushCategories(res.categories);

					// 触发免费播放器基础数据获取
					// this.$refs.TopVideo.getStoreData(storeObj);
					if (storeObj.out_video) this.initPlayer(storeObj.out_video);
				})
			},

			// 加载播放器
			initPlayer($videoUrl = null) {
				this.player = new player({
					container: document.getElementById('index-player'),
					autoplay: false,
					theme: '#FADFA3',
					loop: true,
					lang: 'zh-cn',
					screenshot: false, // 是否开启截图
					hotkey: true, // 是否开启热键
					volume: 0.7, // 默认音量
					mutex: true, // 阻止多个播放器同时播放
					video: {
						url: $videoUrl ?  $videoUrl : BASE_VIDEO,
						// url: 'http://'+ BASE +'/static/76686a0e/76686a0e.m3u8',
						type: 'customHls',
						customType: {
							customHls: function (video, player) {
								const hls = new Hls();
								hls.loadSource(video.src);
								hls.attachMedia(video)
							}
						}
					}
				})
			},

			// 跳转详情页面
			jumpDetail(type, payType, videoId, code) {
				this.$u.route({
					url: 'pages/index/detail',
					params: {
						price_type: type,
						pay_type: payType,
						video_id: videoId,
						code: code,
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>

</style>
